<template>

  <div style="width: 100%;display: flex;">

    <div style="width: calc(100% - 316px);margin: 8px 16px 8px 0;position: relative;">

      <div class="dynamic-item">
        <img class="common-user-head" :src="'/api/user/head/id/'+userInfoStore.userInfo.id" alt="头像">
        <div class="dynamic-inner">
          <p class="user-name common-black-text">{{ userInfoStore.userInfo.username }}</p>
          <p class="dynamic-time common-grey-text">{{ "2023-11-14" }}</p>
          <p class="dynamic-content">{{ "这是内容" }}</p>

          <div class="bottom-ui">
            <span class="bottom-item">
              <el-icon :size="20" class="bottom-item-icon"><Share /></el-icon>
              <span class="bottom-item-span">分享</span>
            </span>
            <span class="bottom-item">
              <el-icon :size="20" class="bottom-item-icon"><Comment /></el-icon>
              <span class="bottom-item-span">评论</span>
            </span>
            <span class="bottom-item">
              <el-icon :size="20" class="bottom-item-icon"><Star /></el-icon>
              <span class="bottom-item-span">点赞</span>
            </span>
          </div>
        </div>
      </div>

    </div>

    <div style="width: 300px;margin-top: 8px;position: relative;">
      <div style="background-color: white;padding: 16px;height: 100px">
        <p style="border-bottom: rgba(120,125,129,0.29) 1px solid;padding-bottom: 8px">个人资料</p>
        <p class="common-grey-text" style="padding-top: 8px;font-size: 14px ">UID: {{ userInfoStore.userInfo.id }}</p>
      </div>
    </div>

  </div>

</template>

<script setup>

import {useUserInfoStore} from "../../../store/UserInfoStore";

const userInfoStore = useUserInfoStore();

</script>

<style scoped>
.dynamic-item{
  padding: 16px 32px;
  background-color: white;
  display: flex;
}

.dynamic-inner{
  padding-left: 20px;
  width: calc(100% - 60px);
}

.user-name{
  font-size: 20px;
}

.dynamic-time{
  font-size: 14px;
}

.dynamic-content{
  font-size: 18px;
}

.bottom-ui{
  padding: 16px 0 0 0;
  display: flex;
  justify-content: space-between;
}

.bottom-item{
  cursor: pointer;
}

.bottom-item-icon{

}

.bottom-item-span{
  position: relative;
  top: -5px;
  left: 4px;
}

</style>